<template>
    <div class="ftgl-tzbl-form-wrap">
        <el-form :model="formData" :ref="editFormRef" :rules="rules" label-width="85px" @submit.native.prevent>
            <div class="block">
                <div class="title">合同信息</div>

                <div class="content">
                    <el-form-item label="合同编号" prop="htbh">
                        <el-input readonly v-model="formData.htbh" placeholder="未获取到合同编号" style="width: 240px;">
                            <el-button slot="append" @click="handleSeeHt">查看合同</el-button>
                        </el-input>
                    </el-form-item>

                    <el-form-item label="签署时间" prop="qssj">
                        <el-date-picker readonly v-model="formData.qssj" type="date" placeholder="未获取到签署时间" style="width: 180px;"/>
                    </el-form-item>

                    <el-form-item label="合同资源数" label-width="90px" prop="htzys">
                        <el-input readonly v-model="formData.htzys" placeholder="未获取到合同资源数" style="width: 180px;"/>
                    </el-form-item>
                </div>
            </div>

            <div class="block zlzy">
                <div class="title">租赁资源</div>

                <div class="content">
                    <ul v-if="roomList && roomList.length > 0" class="room-list clearFloat">
                        <li class="room-item" v-for="(item, index) in roomList" :key="index" :class="{'is-active': selectedRoomId === item.id}" @click="selectedRoomId = item.id">
                            <div class="img-parent">
                                <img :src="item.url" alt="">
                            </div>

                            <div class="info">
                                <div class="name">
                                    <ev-iconFont icon="icon-louyu"/>
                                    <span :title="item.name">{{item.name}}</span>
                                </div>
                                <div class="position">
                                    <ev-iconFont icon="icon-location"/>
                                    <span :title="item.position">{{item.position}}</span>
                                </div>
                                <div class="price">
                                    <ev-iconFont icon="icon-qian1"/>
                                    <span :title="item.price + '元/' +item.priceDw">{{item.price}}元/{{item.priceDw}}</span>
                                </div>
                                <div class="mj">
                                    <ev-iconFont icon="icon-pingfangmi"/>
                                    <span :title="item.mj + 'm²'">{{item.mj}}m²</span>
                                </div>
                                <div class="jm">
                                    <ev-iconFont icon="icon-mian"/>
                                    <span :title="item.jm + 'm²'">{{item.jm}}m²</span>
                                </div>
                                <div class="czf">
                                    <ev-iconFont icon="icon-yonghu"/>
                                    <span :title="item.czf">{{item.czf}}</span>
                                </div>
                            </div>

                            <el-button plain icon="el-icon-s-promotion" class="see-ht-button" @click.prevent.stop="handleSeeRoom(item)">查看房屋</el-button>
                        </li>
                    </ul>

                    <empty v-else=""/>
                </div>
            </div>

            <div class="block">
                <div class="title">租客信息</div>

                <div class="content">
                    <el-form-item label="租客姓名" prop="zkInfo.name">
                        <el-input readonly v-model="zkInfo.name" placeholder="未获取到租客姓名" style="width: 180px;"/>
                    </el-form-item>

                    <el-form-item label="租客性别" prop="zkInfo.sex">
                        <el-input readonly v-model="zkInfo.sex" placeholder="未获取到租客性别" style="width: 180px;"/>
                    </el-form-item>

                    <el-form-item label="联系方式" prop="zkInfo.phone">
                        <el-input readonly v-model="zkInfo.phone" placeholder="未获取到联系方式" style="width: 180px;"/>
                    </el-form-item>
                </div>
            </div>

            <div class="block zlqx">
                <div class="title">租赁期限</div>

                <div class="content">
                    <template v-if="formData.zlStartDate && formData.zlEndDate">
                        <span>{{formData.zlStartDate}} 至 {{formData.zlEndDate}}</span>
                        <span>共计 <b>{{zlDays}}</b> 天</span>
                    </template>

                    <empty v-else=""/>
                </div>
            </div>

            <div class="block">
                <div class="title">退租抄表</div>

                <div class="content">
                    <el-table v-if="tzcbList && tzcbList.lnegth > 0" :data="tzcbList" class="background-table" height="100%" stripe>
                        <el-table-column show-overflow-tooltip label="计量表类型" prop="jlblx"/>
                        <el-table-column show-overflow-tooltip label="计量表" prop="jlb"/>
                        <el-table-column show-overflow-tooltip label="上次读数" prop="scds"/>
                        <el-table-column show-overflow-tooltip label="本次读数" prop="bcds"/>
                        <el-table-column show-overflow-tooltip label="用量" prop="yl"/>
                        <el-table-column show-overflow-tooltip label="总用量" prop="zyl"/>
                    </el-table>

                    <empty v-else=""/>
                </div>
            </div>

            <div class="block ptqr">
                <div class="title">配套确认</div>

                <div class="content">
                    <ul v-if="facilities && facilities.length > 0" class="clearFloat">
                        <li :class="{'is-active': selectedFacilities.includes('all')}" @click="handleSelectedFacilities('all')">
                            <i class="el-icon-success"/>
                            <span>全部</span>
                        </li>
                        <li v-for="(item, index) in facilities" :key="index" :class="{'is-active': selectedFacilities.includes(item)}" @click="handleSelectedFacilities(item)">
                            <i class="el-icon-success"/>
                            <span>{{item}}</span>
                        </li>
                    </ul>

                    <el-input v-model="formData.ptqrRemark" type="textarea" :rows="3" resize="none" placeholder="请输入备注信息"/>
                </div>
            </div>

            <div class="block">
                <div class="title">相关附件</div>

                <div class="content">
                    <empty/>
                </div>
            </div>

            <div class="block tzsm">
                <div class="title">退租说明</div>

                <div class="content">
                    <el-form-item label="退租类型" prop="tzlx">
                        <el-select v-model="formData.tzlx" placeholder="请选择退租类型" style="width: 100%">
                            <el-option label="到期退租" value="dqtz"/>
                            <el-option label="提前退租" value="tqtz"/>
                        </el-select>
                    </el-form-item>

                    <el-form-item v-if="formData.tzlx === 'tqtz'" label="计租截止" prop="jzjz">
                        <el-date-picker v-model="formData.jzjz" type="date" placeholder="请选择计租截止日期" style="width: 160px;"/>
                    </el-form-item>

                    <el-form-item label="办理日期" prop="blrq">
                        <el-date-picker v-model="formData.blrq" :clearable="false" type="date" placeholder="请选择办理日期" style="width: 160px;"/>
                    </el-form-item>

                    <el-form-item label="打印模板" prop="dymb">
                        <el-select v-model="formData.dymb" placeholder="请选择打印模板" style="width: 100%" clearable>
                            <el-option label="模板1" value="mb1"/>
                        </el-select>
                    </el-form-item>

                    <el-form-item label="退租附件" prop="sysAttachments" class="no-offset" style="width: 100%; margin-top: 15px;">
                        <upload-file v-model="formData.sysAttachments" multiple/>
                    </el-form-item>

                    <el-form-item label="退租原因" prop="tzyy" class="no-offset" style="width: 100%; margin-top: 15px;">
                        <el-input type="textarea" :rows="3" resize="none" v-model="formData.tzyy" placeholder="请输入退租原因"/>
                    </el-form-item>
                </div>
            </div>

            <div class="block">
                <div class="title">
                    <span>退租结算</span>
                    <el-button style="position: absolute;right: 0;top: -5px;" plain type="primary" @click="handleAddLsfx">添加临时费项</el-button>
                </div>

                <div class="content">
                    <el-table :data="formData.tzjsList" class="background-table" stripe>
                        <el-table-column label="费项" width="280px">
                            <template slot-scope="props">
                                <p>{{props.row.name}}</p>
                                <p>{{props.row.fxStartDate}} 至 {{props.row.fxEndDate}} (合计{{calcDaysByDateRange(props.row.fxStartDate, props.row.fxEndDate)}}天)</p>
                            </template>
                        </el-table-column>
                        <el-table-column show-overflow-tooltip label="缴费期限" prop="jfqx"/>
                        <el-table-column show-overflow-tooltip label="应收（元）" prop="ys"/>
                        <el-table-column show-overflow-tooltip label="实收（元）" prop="ss"/>
                        <el-table-column show-overflow-tooltip label="待收（元）" prop="ds"/>
                        <el-table-column show-overflow-tooltip label="待退（元）" prop="dt"/>
                        <el-table-column label="操作" width="300">
                            <template slot-scope="props">
                                <el-button type="text" class="in-text-button in-text-primary" @click="handleEditFx(props.$index)">编辑</el-button>
                                <el-button v-if="!props.row.id" type="text" class="in-text-button in-text-remove" @click="handleRemoveFx(props.$index)">删除</el-button>
                            </template>
                        </el-table-column>
                    </el-table>
                </div>
            </div>

            <div class="block tzjshz">
                <div class="title">退租结算汇总</div>

                <div class="content">
                    <el-table :data="formData.tzjshzList" class="background-table" stripe row-key="id" default-expand-all>
                        <el-table-column show-overflow-tooltip label="费项" prop="name"/>
                        <el-table-column show-overflow-tooltip label="应收（元）" prop="ys"/>
                        <el-table-column show-overflow-tooltip label="实收（元）" prop="ss"/>
                        <el-table-column show-overflow-tooltip label="待收（元）" prop="ds"/>
                        <el-table-column show-overflow-tooltip label="待退（元）" prop="dt"/>
                        <el-table-column show-overflow-tooltip label="合计" prop="hj"/>
                    </el-table>
                </div>
            </div>

            <div class="block footer-button-wrap">
                <div class="content">
                    <el-button type="info" @click="goToList">返回列表</el-button>
                    <el-button type="primary" @click="submitHandler">确认办理</el-button>
                </div>
            </div>
        </el-form>

        <add-fx ref="addFxRef"/>
    </div>
</template>

<script>
    export default JBoot({
        components: {
            'add-fx': require('./add-fx').default
        },

        props: {},

        data() {
            return {
                moduleName: 'ftgl',
                getMethod: 'getRoomHtInfo',
                submitMethod: 'handleTz',
                selectedRoomId: undefined,
                selectedFacilities: [],
                rules: {
                    tzlx: [{required: true, message: '请选择退租类型'}],
                    jzjz: [{required: true, message: '请选择计租截止日期'}]
                }
            }
        },

        computed: {
            roomList (){
                return this.formData.roomList || [];
            },

            zkInfo (){
                return this.formData.zkInfo || {};
            },

            zlDays (){
                return this.calcDaysByDateRange(this.formData.zlStartDate, this.formData.zlEndDate);
            },

            tzcbList (){
                return this.formData.tzcbList || [];
            },

            selectedRoom (){
                return this.roomList.find(item => item.id === this.selectedRoomId) || {};
            },

            facilities (){
                return (this.selectedRoom.facilities || '').split(',');
            }
        },

        methods: {
            handleSeeHt (){

            },

            handleSeeRoom (room){

            },

            initFormDataInfo (responseData){
                this.$set(this, 'formData', Object.assign({}, responseData, {
                    tzjsList: responseData.tzjsList || [],
                    tzlx: responseData.tzlx || 'dqtz',
                    blrq: responseData.blrq || new Date()
                }));

                this.$set(this, 'selectedRoomId', (this.roomList[0] || {}).id);
            },

            handleSelectedFacilities (item){
                if(item === 'all'){
                    this.$set(this, 'selectedFacilities', ['all']);
                }else{
                    let index = this.selectedFacilities.indexOf('all');

                    if(index > -1){
                        this.selectedFacilities.splice(index, 1);
                    }

                    index = this.selectedFacilities.indexOf(item);

                    if(index > -1){
                        this.selectedFacilities.splice(index, 1);
                    }else{
                        this.selectedFacilities.push(item);
                    }
                }
            },

            handleAddLsfx (){
                this.$getRef('addFxRef').show({title: '添加临时费项', callback: response => {
                    this.formData.tzjsList.unshift(Object.assign({}, response, {
                        ss: 0,
                        ds: response.ys,
                        dt: 0
                    }));
                }});
            },

            handleRemoveFx (index){
                this.$isOk('删除费项', '是否要删除该费项?').then(() => this.formData.tzjsList.splice(index, 1));
            },

            handleEditFx (index){
                let item = this.formData.tzjsList[index];

                if(item){
                    this.$getRef('addFxRef').show({title: '添加临时费项', form: item, callback: response => {
                        this.formData.tzjsList.unshift(Object.assign({}, response, {
                            ss: 0,
                            ds: response.ys,
                            dt: 0
                        }));
                    }})
                }
            },

            getEditFormDataInfo (){
                return Object.assign({}, this.formData, {
                    facilities: this.selectedFacilities.join(',')
                });
            },

            goToList (){
                this.$jump({name: 'ftglList'});
            },

            submitSuccess (){
                this.$success('退租办理成功');

                this.goToList();
            }
        },

        watch: {}
    }).form().build();
</script>

<style lang="scss">
    .ftgl-tzbl-form-wrap {
        background-color: #FFFFFF;
        padding: 15px;
        border-radius: 5px;
        border: 1px solid #efefef;
        & .block{
            position: relative;
            &:not(:last-child){
                margin-bottom: 25px;
            }
            & > .title{
                background-color: #2196F3;
                padding: 0 20px;
                display: inline-block;
                border-top-left-radius: 5px;
                border-top-right-radius: 5px;
                text-align: center;
                color: #ffffff;
                font-size: 14px;
                line-height: 26px;
            }
            & > .content{
                border: 1px solid #e4e4e4;
                border-top: 1px solid #2196F3 !important;
                border-radius: 5px;
                padding: 15px;
                background-color: #fbfcf9;
                border-top-left-radius: 0 !important;
                border-top-right-radius: 0 !important;
                & > .el-form-item{
                    display: inline-block;
                    margin-bottom: 0;
                    &+.el-form-item:not(.no-offset){
                        margin-left: 20px;
                    }
                }
            }
            &.zlzy{
                & > .content{
                    & > .room-list{
                        margin: -15px 0 0 -15px;
                        & > .room-item{
                            float: left;
                            background-color: #FFFFFF;
                            padding: 10px;
                            margin: 15px 0 0 15px;
                            border: 1px solid #efefef;
                            border-radius: 3px;
                            box-sizing: border-box;
                            height: 155px;
                            cursor: pointer;
                            position: relative;
                            transition: box-shadow .3s;
                            &:hover, &.is-active{
                                box-shadow: 5px 4px 8px 2px #bfbfbf;
                            }
                            &.is-active{
                                border: 1px solid red;
                                & > .img-parent > img{
                                    transform: scale(1.1);
                                }
                            }
                            & > .img-parent{
                                width: 160px;
                                height: 100%;
                                display: inline-block;
                                overflow: hidden;
                                & > img{
                                    transition: transform .3s;
                                    width: 100%;
                                    height: 100%;
                                    transform: scale(1);
                                }
                            }
                            & > .info{
                                width: 165px;
                                display: inline-block;
                                vertical-align: top;
                                margin-left: 5px;
                                font-size: 13px;
                                & > div{
                                    &:not(.name){
                                        line-height: 16px;
                                        & > i{
                                            color: #757575;
                                            font-size: 14px;
                                            display: inline-block;
                                            width: 14px;
                                            vertical-align: top;
                                        }
                                        & > span{
                                            color: #009688;
                                            display: inline-block;
                                            width: calc(100% - 20px);
                                            white-space: nowrap;
                                            overflow: hidden;
                                            text-overflow: ellipsis;
                                        }
                                    }
                                }
                                & > .name{
                                    margin-bottom: 10px;
                                    color: #333333;
                                    & > span{
                                        font-weight: 600;
                                        font-size: 16px;
                                    }
                                }
                            }
                            & > .see-ht-button{
                                position: absolute;
                                right: 10px;
                                bottom: 10px;
                                padding: 5px 10px;
                            }
                        }
                    }
                }
            }
            &.zlqx{
                & > .content{
                    font-size: 14px;
                    & > span{
                        &:last-child{
                            margin-left: 15px;
                            & > b{
                                color: red;
                            }
                        }
                    }
                }
            }
            &.ptqr{
                & > .content{
                    & > ul{
                        margin: -10px 0 20px -10px;
                        & > li{
                            float: left;
                            position: relative;
                            margin: 10px 0 0 10px;
                            &:first-child{
                                margin-right: 20px;
                            }
                            border: 1px solid #DEDEDE;
                            border-radius: 3px;
                            line-height: 26px;
                            padding: 0 10px;
                            color: #333333;
                            font-size: 12px;
                            cursor: pointer;
                            user-select: none;
                            &.is-active{
                                color: #015DAA;
                                border-color: #015DAA;
                                & > i{
                                    display: inline-block;
                                }
                            }
                            &.is-disabled{
                                border-color: #DEDEDE;
                                color: #999999;
                                background-color: #F3F3F3;
                            }
                            & > i{
                                display: none;
                                position: absolute;
                                right: -5px;
                                top: -5px;
                                background-color: #ffffff;
                                font-size: 14px;
                            }
                        }
                    }
                }
            }
            &.tzjshz{
                & .el-table__expand-icon{
                    display: none;
                }
                & .el-table__row{
                    &.expanded{
                        & > td{
                            font-weight: 600;
                            color: #333333;
                            &:last-child{
                                font-weight: bold;
                            }
                        }
                    }
                    & > td{
                        &:last-child{
                            color: orange;
                        }
                    }
                }
            }
            &.footer-button-wrap{
                & > .content{
                    text-align: center;
                    border-top-color: #e4e4e4 !important;
                }
            }
        }
    }
</style>
